import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Button, Col, Layout, message, Popconfirm, Row, Tabs } from 'antd'
import { Page } from 'components'
import queryString from 'query-string'

import BlackList from './components/blackList'
import DataList from "./components/whiteList"
import DataDictionaryList from "./components/dataDictionary"
import { queryArray, treeToArray } from "utils"
import SensitiveWords from './components/SensitiveWords'

const { Sider, Content } = Layout
const { TabPane } = Tabs

class DataDictionary extends React.Component {

  constructor() {
    super()

    this.state = {
      activeKey: "dataDictionary",
    }
  }

  render() {
    const { location, dispatch, loading, dataDictionary } = this.props
    const {
      dictionarys,
      blackList,
      blackListPage,
      whiteList,
      whiteListPage,
      sensitiveWordsList,
      selectedRowOfBlackList,
      selectedRowOfWhiteList,
      selectedWhiteListRowKeys,
      selectedBlackListRowKeys,
      modalVisible } = dataDictionary
    const { query, pathname } = location
    const { activeKey } = this.state

    const handleRefresh = (newQuery) => {
      dispatch(routerRedux.push({
        pathname,
        search: queryString.stringify({
          ...query,
          ...newQuery,
        }),
      }))
    }

    const handleRefreshByType = (type, newQuery) => {
      dispatch({
        type: `permission/${type}`,
        payload: {
          ...newQuery,
        },
      })
    }

    const handleMemberRefresh = (newQuery) => {
      const { roleId } = newQuery
      dispatch({
        type: 'employee/query',
        payload: {
          ...newQuery,
        },
      }).then(() => {
        dispatch({
          type: 'permission/updateState',
          payload: {
            selectedRoleId: roleId,
          },
        })
      })
    }

    const handleNoRoleMemberRefresh = (newQuery) => {
      dispatch({
        type: 'permission/noRoleMembers',
        payload: {
          ...newQuery,
          hasRoleId: 0,
        },
      })
    }

    const handleTabChange = (key) => {
      this.setState({
        activeKey: key,
      }, () => {
        switch (this.state.activeKey) {
          case "dataDictionary":
            dispatch({
              type: "dataDictionary/getDictionarys"
            })
            break;
          case "blackList":
            dispatch({
              type: "dataDictionary/getBlacklists"
            })
            break;
          case "whiteList":
            dispatch({
              type: "dataDictionary/getWhitelists"
            })
            break;
          case "sensitiveWords":
            dispatch({
              type: "dataDictionary/getSensitiveWords"
            })
            break;
        }
      })
    }

    const dataDictionaryProps = {
      rowKey: 'id',
      dataSource: dictionarys,
      loading: loading.effects['dataDictionary/getDictionarys'],
      pagination: false,
      location,
      addDictionaryItems(payload) {
        return dispatch({
          type: "dataDictionary/addDictionaryItems",
          payload
        })
      },
      updateDictionaryItems(payload) {
        return dispatch({
          type: "dataDictionary/updateDictionaryItems",
          payload
        })
      },
      deleteDictionaryItems(id, parentId) {
        return dispatch({
          type: "dataDictionary/deleteDictionaryItems",
          payload: {
            id,
            parentId
          }
        })
      }
    }

    const handleChange = (page) => {
      console.log(page)
    }

    const blackListProps = {
      location,
      dataSource: blackList,
      pagination: {
        ...blackListPage,
        onChange: (page, paseSize) => dispatch({
          type: "dataDictionary/getBlacklists",
          payload: {
            current: page,
            size: paseSize
          }
        }),
        onShowSizeChange: (current, size) => dispatch({
          type: "dataDictionary/getBlacklists",
          payload: {
            current,
            size
          }
        })
      },
      loading: loading.effects['dataDictionary/getBlacklists'],
      selectedRowOfBlackList,
      modalProps: {
        modalVisible,
        selectedRowOfBlackList,
        handleOk(payload) {
          dispatch({
            type: "dataDictionary/updateBlackList",
            payload
          })
        },
        handleCancel() {
          dispatch({
            type: "dataDictionary/updateState",
            payload: {
              modalVisible: false
            }
          })
        }
      },
      handleEdit() {
        dispatch({
          type: "dataDictionary/updateState",
          payload: {
            modalVisible: true
          }
        })
      },
      addBlackList(payload) {
        dispatch({
          type: "dataDictionary/addBlackList",
          payload
        })
      },
      rowSelection: {
        selectedRowKeys: selectedBlackListRowKeys,
        onChange: (keys, row) => {
          dispatch({
            type: 'dataDictionary/updateState',
            payload: {
              selectedRowOfBlackList: row,
              selectedBlackListRowKeys: keys
            },
          })
        }
      },
      onOk(ids) {
        if (ids.length === 1) {
          dispatch({
            type: "dataDictionary/deleteBlackList",
            payload: {
              id: ids[0]
            }
          })
        } else {
          dispatch({
            type: "dataDictionary/batchDeleteBlackList",
            payload: {
              ids
            }
          })
        }
      }
    }

    const whiteListProps = {
      location,
      dataSource: whiteList,
      pagination: {
        ...whiteListPage,
        onChange: (page, paseSize) => dispatch({
          type: "dataDictionary/getWhitelists",
          payload: {
            current: page,
            size: paseSize
          }
        }),
        onShowSizeChange: (current, size) => dispatch({
          type: "dataDictionary/getWhitelists",
          payload: {
            current,
            size
          }
        })
      },
      loading: loading.effects['dataDictionary/getWhitelists'],
      selectedRowOfWhiteList,
      onFilterChange(value) {
        dispatch({
          type: "dataDictionary/getWhitelists",
          payload: {
            ...value,
            current: 1
          }
        })
      },
      handleAddWhiteList(payload) {
        dispatch({
          type: "dataDictionary/addWhiteList",
          payload
        })
      },
      rowSelection: {
        selectedRowKeys: selectedWhiteListRowKeys,
        onChange: (keys, row) => {
          dispatch({
            type: 'dataDictionary/updateState',
            payload: {
              selectedWhiteListRowKeys: keys,
              selectedRowOfWhiteList: row,
            },
          })
        }
      },
      onOk(ids) {
        if (ids.length === 1) {
          dispatch({
            type: "dataDictionary/deleteWhiteList",
            payload: {
              id: ids[0]
            }
          })
        } else {
          dispatch({
            type: "dataDictionary/batchDeleteWhiteList",
            payload: {
              ids
            }
          })
        }
      }
    }

    const sensitiveWordsProps = {
      dataSource: sensitiveWordsList,
      handleAddSensitiveWord(payload) {
        return dispatch({
          type: "dataDictionary/addSensitiveWord",
          payload
        })
      },
      updateSensitiveWord(payload) {
        return dispatch({
          type: "dataDictionary/updateSensitiveWord",
          payload
        })
      },
      deleteSensitiveWord(id) {
        return dispatch({
          type: "dataDictionary/deleteSensitiveWord",
          payload: {
            id
          }
        })
      }
    }




    const ColProps = {
      xs: 24,
      sm: 12,
      style: {
        marginBottom: 16,
      },
    }



    return (
      <Layout>

        <Content style={{ padding: '0 24px', minHeight: 280 }}>
          <Page inner>
            <Tabs activeKey={activeKey} onChange={handleTabChange}>
              <TabPane tab={'数据字典'} key={'dataDictionary'}>
                <DataDictionaryList {...dataDictionaryProps} />
              </TabPane>
              <TabPane tab={'黑名单'} key={'blackList'}>
                <BlackList {...blackListProps} />
              </TabPane>
              <TabPane tab={'白名单'} key={'whiteList'}>
                <DataList {...whiteListProps} />
              </TabPane>
              <TabPane tab={'敏感词'} key={'sensitiveWords'}>
                <SensitiveWords {...sensitiveWordsProps} />
              </TabPane>
            </Tabs>
          </Page>
        </Content>
      </Layout>
    )
  }
}

DataDictionary.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ loading, dataDictionary }) => ({ loading, dataDictionary }))(DataDictionary)
